<template>
    <draggable
        class="list-group"
        :list="nodeList"
        itemKey="key"
        tag="ul"
        :sort="false"
        :group="dragOptions"
        :force-fallback="true"
        :fallback-on-body="true"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @end="onDragEnd"
        @start="onDragStart"
    >
        <template #item="{ element, index }">
            <li class="list-group-item" :key="element.key">
                <Icon :type="element.icon" :color="element.color" size="22" />
                <p>{{ element.name }}</p>
            </li>
        </template>
    </draggable>
</template>

<script setup lang="js">
import draggable from 'vuedraggable';

const props = defineProps({
    nodeList: {
        type: Array,
        default: []
    }
})
const dragOptions = reactive({
    name: "drag", // 分组名称
    put: false, // 允许拖入
    pull: () => {
        return 'clone';
    },
})
const currentNode = ref({})

const emit = defineEmits(['on-drag-end'])


// 拖拽开始事件
const onDragStart = evt => {
    const { originalEvent: { clientX, clientY }, item, oldIndex } = evt
    currentNode.value = { x:clientX, y: clientY }
    // console.log(clientX, clientY);
}

// 拖拽结束事件
const onDragEnd = (evt) => {
    emit('on-drag-end', { evt, oldC: currentNode.value })
}
</script>

<style lang="scss">
.ghost {
    opacity: 0.5;
    background: #10ac84 !important;
    border: solid 1px rgb(19, 41, 239) !important;
}
.list-group {
    min-height: 20px;
}

.list-group-item {
    user-select: none;
    cursor: move;
    border: 1px solid #eee;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    &:hover {
        background: rgba($color: #000000, $alpha: 0.1);
    }
    p {
        padding-left: 10px;
    }
}
.chosenClass {
    background-color: #c8ebfb !important;
    border: 1px solid #fff;
}
</style>
